<template>
	<view class="box">
		<!-- 轮播 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
			@change="changeSwiper" :current="index">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<view class="swiper-item">
					<image :src="item.image"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 文章列表 -->
		<view class="list">
			<card v-for="(item,index) in articleList" :key="index" :item="item"></card>
			<!-- 下拉刷新 上拉加载 -->
			<uni-load-more v-show="articleList.length" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	//引入自定义组件  口诀：1引2注3使用
	//定义一个加载页面数据的常亮
	const PAGE_SIZE = 4;
	export default {

		data() {
			return {
				index: 0,
				banners: [],
				articleList: [],
				query: {
					page: 1
				},
				loadStatus: 'more',
				isLoaded: false //判断是否加载完成
			}
		},
		onLoad() {
			// 获取轮播
			this.getBanners()
			//获取文章列表
			this.getArticleList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.onRefresh()
		},
		// 加载下一页
		onReachBottom() {
			this.getNextPage()
		},
		methods: {
			changeSwiper(e) {
				// console.log(e.detail.current);
			},
			getBanners() {
				this.$request({
					url: this.$api.getBanner,
					success: data => {
						// console.log(data);
						this.banners = data;
					}
				})
			},
			//获取文章列表
			getArticleList() {
				this.loadStatus = 'loading'
				this.$request({
					url: this.$api.getArticleList,
					data: this.query,
					success: data => {
						// 按照更新时间来进行排序
						function rTime(date) {
							var json_date = new Date(date).toJSON();
							return new Date(new Date(json_date)).toISOString().replace(/T/g, ' ').replace(
								/\.[\d]{3}Z/, '')
						}
						// let date = rTime(data[0].updateTime);
						// console.log(date) // 2020-06-27 14:20:27
						// let newDate = new Date(date).getTime();
						// 把文章中所有的时间转化
						data.forEach((item) => {
							item.updateTime = rTime(new Date(item.updateTime).getTime() + 8 * 3600 *
								1000)
						})
						// 根据时间进行排序
						data.sort((a, b) => {
							return new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime()
						})



						data = data.slice((this.query.page - 1) * PAGE_SIZE, PAGE_SIZE * this.query.page);
						//3.3 取消下拉刷新
						uni.stopPullDownRefresh()
						//判断数据会否加载完成
						this.isLoaded = data.length < PAGE_SIZE;
						//分页的公式：第一个值:页面减1,第二个值:页面的总条数*页面数 减1
						this.loadStatus = this.isLoaded ? 'noMore' : 'more';
						if (this.query.page > 1) {
							this.articleList.push(...data)
						} else {
							this.articleList = data;
						}
					},
					fail: () => {
						//3.3 取消下拉刷
						uni.stopPullDownRefresh()
					}
				})
			},
			// 下拉刷新
			onRefresh() {
				// console.log('下拉刷新');
				this.query.page = 1;
				// 3.1 初始化首页的文章列表,页面数为1
				//3.2 调用获取文章列表的接口
				this.getArticleList();
			},
			// 下拉触底
			getNextPage() {
				if (this.isLoaded) return;
				this.query.page++;
				this.getArticleList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F5F5F5;

		// 轮播
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}

		// 文章列表
		.list {}
	}
</style>
